<template>
  <div>
  <van-loading size="24px" vertical v-if="!datas">加载中...</van-loading>
  <div class="details" v-if="datas">
    <div class="heads">
      <div class="fh" @click="$router.push({ path: '/Home' })">
        <span class="iconfont icon-arrow-left-bold"></span> 返回
      </div>
      <div class="center">本书详情</div>
      <router-link class="shuJ" tag="div" to="/bookshelf"
        ><span class="iconfont icon-shujia"></span> 书架</router-link
      >
    </div>
    <div class="data">
      <div class="top">
        <div class="img">
          <img :src="img" width="100%" height="100%" alt="" />
        </div>
        <div class="top_txt">
          <div class="name">{{ datas.title }}</div>
          <div class="at">
            <span class="i">作者: </span><span>{{ datas.author.name }}</span>
          </div>
          <div class="fenlei">
            <span class="i">分类: </span
            ><span>{{ datas["pris:book"].category }}</span>
          </div>
          <div class="zis">
            <span class="i">字数: </span
            ><span>{{ datas["pris:book"].words }}</span>
          </div>
          <div class="nib">
            <span class="i">点击: </span
            >{{ datas["pris:subscribe"].clicksCount }}
          </div>
          <div
            :class="['addBook', userBook ? 'Collected' : 'notCollected']"
            @click="addBook"
          >
            +书架
          </div>
        </div>
      </div>
      <div class="btns" @click="ringBook">立即阅读</div>
      <div class="new" v-if="newItem" @click="goChapter(newItem.secId)">
        <div class="left">
          <span class="icon">最新</span
          ><span class="name">{{
            newItem.latestArticleTitle
          }}</span>
        </div>
        <div class="right">{{ newItem.update | time }}</div>
      </div>
    </div>
    <div class="jieS">
      <div class="jieS_nav">
        <div class="jieS_title">
          <span class="icon"></span><span>作品介绍</span>
        </div>
      </div>
      <div class="text van-multi-ellipsis--l3">
        {{ datas.content.text }}
      </div>
      <div class="biaoQ" v-if="titles">
        <div class="title">标签:</div>
        <div class="i" v-for="item in titles" :key="item" :v-if="titles">{{
          item
        }}</div>
        <!-- <span class="i">庞文</span>
        <span class="i">情有独钟</span>
        <span class="i">娱乐圈</span> -->
      </div>
    </div>
    <div class="tp">
      <div class="tp_title">
        <span class="icon"></span><span>支持本书</span>
      </div>
      <ul>
        <li>
          <div class="left">投张推荐票来表达你对本书的态度吧!</div>
          <div class="right">投推荐票</div>
        </li>
        <li>
          <div class="left">更多种方式为作者捧场!</div>
          <div class="right">更多捧场</div>
        </li>
      </ul>
    </div>
    <div class="tp" v-if="bookList.length">
      <div class="tp_titleS">
        <div class="left">
          <span class="icon"></span
          ><span>作品目录(共{{ bookList.length }}章)</span>
        </div>
        <div class="rgith" @click="setOrder">{{ order }}</div>
      </div>
      <ul v-show="order == '正序'">
        <li
          v-for="item in zhengXu"
          :key="item.title"
          @click="goChapter(item.secId)"
        >
          <div class="left">{{ item.title }}</div>
          <div class="iconfont icon-suo" v-if="item.needPay"></div>
        </li>
        <div class="booksItem">
          <div @click="goBooksItem">进入作品目录 查看更多</div>
        </div>
      </ul>
      <ul v-show="order == '倒序'">
        <li
          v-for="item in daoXu"
          :key="item.title"
          @click="goChapter(item.secId)"
        >
          <div class="left">{{ item.title }}</div>
          <div class="iconfont icon-suo" v-if="item.needPay"></div>
        </li>
        <div class="booksItem"><div>进入作品目录 查看更多</div></div>
      </ul>
      <div class="comment">
        <div class="top">
          <div class="left">
            <span class="t">最新评论</span><span>({{ Comments.length }})</span>
          </div>
          <div class="right"></div>
        </div>
        <div>
          <div class="item" v-for="item in Comments" :key="item.commentId">
            <div class="img">
              <img :src="item.avatar" alt="" width="100%" height="100%" />
            </div>
            <div class="title">
              <div class="name-time">
                <div class="name">{{ item.nickName }}</div>
                <div class="time">{{ item.time | time }}</div>
              </div>
              <!-- <div class="stp"></div> -->
              <div class="text">
                {{ item.comment }}
              </div>
              <div class="z">
                <span class="iconfont icon-dayizan" @click="adds"></span
                ><span class="num">{{ item.likes }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="gd" v-if="comment" @click="goComment">更多评论</div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {
  getData,
  getImg,
  getNewItem,
  getBookList,
  getComments,
} from "../api/details";
export default {
  data() {
    return {
      datas: null,
      img: null,
      titles: null,
      newItem: null, //最新章节
      bookList: [], //全部目录
      zhengXu: null, //正序
      daoXu: null, //倒序
      order: "正序",
      boackData: null,
      userBook: false,
      Comments: null,
      comment:false
    };
  },
  methods: {
    setOrder() {
      this.order = this.order == "正序" ? "倒序" : "正序";
    },
    goBooksItem() {
      this.$router.push({ path: "/bookDetails/booksItem" });
    },
    goChapter(zId) {
      this.$router.push({ path: "/chapter" });
      this.$store.commit("zId", zId);
    },
    addBook() {
      this.userBook = !this.userBook;
      let id = this.$route.query.id;
      let name = this.$route.query.name;
      let token = window.localStorage.getItem("token");
      if (token) {
        let user = JSON.parse(window.localStorage.getItem("user"));
        console.log(user);
        user.forEach((item) => {
          if (item.username == token) {
            console.log(item);
            if (item.userBooks) {
              if (this.userBook) {
                item.userBooks.push({
                  bookName: name,
                  bookId: id,
                });
              } else {
                // let arr = item.userBook;
                let index = item.userBooks.findIndex((i) => i.bookId == id);
                // console.log(index);
                item.userBooks.splice(index, 1);
              }
            } else {
              console.log('object')
              item.userBooks = [
                {
                  bookName: name,
                  bookId: id,
                },
              ];
            }
          }
          window.localStorage.setItem("user", JSON.stringify(user));
        });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    adds(e) {
      // console.log(e.target.nextElementSibling);
      e.target.classList.toggle("con");
      if (e.target.classList.contains("con")) {
        e.target.nextElementSibling.innerHTML =
          +e.target.nextElementSibling.innerHTML + 1;
      } else {
        e.target.nextElementSibling.innerHTML =
          +e.target.nextElementSibling.innerHTML - 1;
      }
    },
    ringBook() {
      let history = this.$store.state.history;
      let id = this.$route.query.id;
      let oneId = this.zhengXu[0].secId;
      history.forEach((item) => {
        if (item.source_uuid == id) {
          console.log(item.content_uuid);
          this.$store.commit("zId", item.content_uuid);
        } else {
          this.$store.commit("zId", oneId);
        }
      });
      this.$router.push({ path: "/chapter" });
    },
    goComment(){
      let id = this.$route.query.id;
      this.$router.push({path:'/comments',query:{id}})
    }
  },
  filters: {
    time(value) {
      var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000

      let Y = date.getFullYear() + "年";

      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";

      let D = date.getDate() + "日";

      return Y + M + D; //时分秒可以根据自己的需求加上
    },
  },
  watch: {
    bookList() {
      this.$store.commit("bookList", this.bookList);
      this.$store.commit("bookId", this.$route.query.id);
    },
  },
  created() {
    console.log(this.$route.query.id, this.$route.query.name);
    let id = this.$route.query.id;
    let name = this.$route.query.name;
    getData({
      id,
      title: name,
    }).then((data) => {
      console.log(data);
      this.datas = data.feed.entry;
     if(data.feed.entry){
        this.titles = data.feed.entry["pris:book"].keyname.split(",");
      console.log(this.titles);
     }
    });
    getImg({
      sourceUuid: id,
    }).then((data) => {
      this.img = data.data.book.cover;
    });
    getNewItem({ id }).then((data) => {
      this.newItem = data.item;
      console.log(data);
    });
    getBookList({ source_uuid: id }).then((data) => {
      console.log(data.data.catalog);
      this.bookList = data.data.catalog;
      this.zhengXu = this.bookList.slice(0, 6);
      this.daoXu = this.bookList.slice(
        this.bookList.length - 6,
        this.bookList.length
      );
      // console.log(this.daoXu);
    });
    getComments({  id }).then((data) => {
      if(data.all.list.length>5){
        this.Comments = data.all.list.slice(0,5);
        this.comment=true
      }else{
        this.Comments=data.all.list
      }
      console.log(data);
    });
    let user = JSON.parse(window.localStorage.getItem("user"));
    if (user) {
      user.forEach((item) => {
        if (item.userBooks.findIndex((i) => i.bookId == id) != -1) {
          this.userBook = true;
        }
      });
    }
  },
};
</script>

<style lang="less">
.details {
  width: 100vw;
  .heads {
    display: flex;
    justify-content: space-between;
    color: #fff;
    background-color: black;
    height: 50px;
    line-height: 50px;
    .center {
      font-size: 20px;
    }
  }
  .data {
    .top {
      display: flex;
      padding: 15px 7px;
      position: relative;
      align-items: center;

      .img {
        width: 75px;
        height: 100px;
        flex-shrink: 0;
        background-color: pink;
      }
      .top_txt {
        margin-left: 10px;
        font-size: 14px;

        .name {
          color: #303030;
        }
        .i {
          color: #787878;
        }
        .addBook {
          position: absolute;
          width: 56px;
          height: 25px;
          line-height: 25px;
          border-radius: 2px;
          right: 7px;
          top: 0;
          bottom: 0;
          text-align: center;
          margin: auto;
          &.Collected {
            color: #ccc;
            border: 1px solid #ccc;
          }
          &.notCollected {
            color: #ff4643;
            border: 1px solid #ff4643;
          }
        }
      }
    }
    .btns {
      width: 160px;
      height: 37px;
      margin: auto;
      color: #fff;
      background-color: #b33836;
      line-height: 37px;
      text-align: center;
      border-radius: 1px;
    }
    .new {
      display: flex;
      height: 50px;
      justify-content: space-between;
      align-items: center;
      padding: 0 7px;
      font-size: 14px;
      color: #4c4c4c;
      .left {
        .icon {
          color: #ff4643;
          border: 1px solid #ff4643;
          margin-right: 5px;
        }
      }
    }
  }
  .jieS {
    background-color: #fafafa;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 18px;
    .jieS_nav {
      display: flex;
      justify-content: space-between;
      color: #4c4c4c;
      font-size: 14px;
      height: 25px;
      padding: 11px 7px;
      line-height: 14px;
      .icon {
        height: 14px;
        width: 8px;
        float: left;
        background: #5e5e5e;
        border-radius: 2px;
        margin-right: 7px;
        background: #5e5e5e;
      }
    }
    .text {
      padding: 0px 7px;
      margin-bottom: 15px;
      padding-top: 0;
      font-size: 14px;
      text-indent: 2rem;
      color: #787878;
    }
    .biaoQ {
      font-size: 14px;
      padding: 0 7px;
      display: flex;
    flex-wrap: wrap;
        align-items: center;
    .title{

    }
      .i {
        height: 20px;
        border: 1px solid #dfdfdf;
        border-radius: 1px;
        background-color: #f2f2f2;
        margin-left: 5px;
        margin-top: 5px;
        padding: 4px;
      }
    }
  }
  .tp {
    color: #5e5e5e;
    .tp_title {
      color: #4c4c4c;
      font-size: 14px;
      padding: 11px 7px;
      line-height: 14px;
      .icon {
        height: 14px;
        width: 8px;
        float: left;
        background: #5e5e5e;
        border-radius: 2px;
        margin-right: 7px;
        background: #5e5e5e;
      }
    }
    .tp_titleS {
      color: #4c4c4c;
      font-size: 14px;
      padding: 11px 7px;
      line-height: 14px;
      display: flex;
      justify-content: space-between;
      .icon {
        height: 14px;
        width: 8px;
        float: left;
        background: #5e5e5e;
        border-radius: 2px;
        margin-right: 7px;
        background: #5e5e5e;
      }
    }
    ul {
      background-color: #fafafa;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        padding: 0 7px;
        height: 40px;
        line-height: 40px;
        height: 40px;
        border-bottom: 1px solid #dfdfdf;
        &:nth-child(1) {
          border-top: 1px solid #dfdfdf;
        }
        .left {
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 320px;
          overflow: hidden;
        }
        .right {
          color: #4c4c4c;
          background: #f2f2f2;
          font-size: 13px;
          border: 1px solid #dfdfdf;
          border-radius: 3px;
          width: 65px;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
      }
    }
    .booksItem {
      background: #fafafa;
      font-size: 13px;
      line-height: 36px;
      color: #4c4c4c;
      display: block;
      text-align: center;
      border-radius: 3px;
      padding: 12px 8px;
      div {
        background-color: #dfdfdf;
      }
    }
  }
  .comment {
    padding: 10px;
    background-color: #fff;
    .gd{
          border: 1px solid #dfdfdf;
    background: #dfdfdf;
    font-size: 13px;
    line-height: 36px;
    color: #4c4c4c;
    display: block;
    text-align: center;
    border-radius: 3px;
    }
    .top {
      display: flex;
      justify-content: space-between;
      .t {
        color: #1d2c33;
        font-size: 16px;
        font-weight: 800;
      }
    }
    .item {
      display: flex;
      margin-top: 10px;
      border-bottom: 1px dotted #ccc;
      &:last-of-type{
        border: none;
      }
      .img {
        width: 50px;
        height: 50px;
        background-color: pink;
        border-radius: 50%;
        margin-right: 10px;
        flex-shrink: 0;
        overflow: hidden;
      }
      .title {
        width: 100%;
        div {
          margin-bottom: 8px;
        }
        .name-time {
          display: flex;
          justify-content: space-between;
          .time {
            font-size: 13px;
            color: #a8a8a8;
          }
        }
        .z {
          text-align: end;
          .iconfont {
            &.con {
              color: rgb(235, 79, 79);
            }
          }
          .num {
            margin-left: 12px;
          }
        }
      }
    }
  }
}
</style>